<template>
	<view class="searchmain">
		<view class="searchheader">
			<text class="iconfont icon-search"></text>
			<input v-model="message" @input="getsearchlist()" focus='true' class="input1" type="text" placeholder="输入关键字,不超过10个字符" maxlength="10" />
		</view>
		 
		
		
		<view class="chai" v-if="isshow">
				<view @click="goitem(item.id)" class="chaiitem" v-for="item in searchlists" :key="item.id">
					<view class="left">
						<image :src="item.imgurl" mode="aspectFill"></image>
					</view>
					<view class="right">
						<text class="title">{{item.title}}</text>
						<star :score='item.star' />
						<text class="list1">类型：{{item.catagory}}</text>
						<text class="list1">上映时间：{{item.pushdate}}</text>
				</view>
		</view>
		</view>
		
		<view class="chai" v-else>
				<view @click="goitem(item.id)" class="chaiitem" v-for="item in searchlist" :key="item.id">
					<view class="left">
						<image :src="item.imgurl" mode="aspectFill"></image>
					</view>
					<view class="right">
						<text class="title">{{item.title}}</text>
						<star :score='item.star' />
						<text class="list1">类型：{{item.catagory}}</text>
						<text class="list1">上映时间：{{item.pushdate}}</text>
				</view>
		</view>
		</view>
		
		
	</view>
</template>

<script>
	import { request } from "../../request/index.js"
	import star from '../../components/star.vue'
	export default{
		data(){
			return {
				timer:null,
				searchlist:[],
				message:'',
				searchlists:[],
				isshow:true
			}
		},
		onLoad(){
			this.getsearchlists()
		},
		components:{
			star
		},
		onReachBottom(){
			request({
						url:`/search/lists`,
						method:'get',	 
					}).then(res=>{
						// console.log(res)
						this.searchlists=[...this.searchlists,...res.data.data]
					})
			
		},
		methods:{
			//跳转到详情页
				goitem(e){
					// console.log(e)
					uni.navigateTo({
						url:`../movie/movie?id=${e}`
					})
				},
			
			//关键字搜索
			getsearchlist(){
				this.isshow=false
				var that=this 
				if(this.message){
				clearTimeout(that.timer)
				that.timer=setTimeout(function(){
					request({
						    url:`/search/list?message=${that.message}`,
							method:'get',	 
							}).then(res=>{
								that.searchlist=res.data.data
							})
				},1200) 	
				}else{
						this.isshow=true
						this.searchlists=[]
						this.getsearchlists()
					}
				},
				
			
			//无搜索内容获取
		 getsearchlists(){
		 		request({
		 					url:`/search/lists`,
		 					method:'get',	 
		 				}).then(res=>{
		 					this.searchlists=res.data.data
		 				})
		 		}
							
				}
		}
	
</script>

<style scoped lang="less">
	.searchmain{
		padding-top: 70upx;
		width: 100vw;
		.searchheader{
			background-color: #cdcdcd;
			display: flex;
			width: 100%;
			height: 70upx;
			// line-height: 70upx;
			border-bottom: 1px solid #ccc;
			position: fixed;
			top: 0;
			left: 0;
			.icon-search{
				flex:1;
				display: block;
				text-align: center;
				font-size: 40upx;
				color: #D6A2E8;
				height: 70upx;
				line-height: 70upx;
			}
			.input1{
				flex:7;
				font-size: 32upx;
				height: 70upx;
				line-height: 70upx;
			}
		}
		
		.chai{
			width: 100vw;
		.chaiitem{
			width: 100%;
			display: flex;
			margin-top: 10upx;
			border-bottom: 1px solid #ccc;
			.left{
				flex:1;
				padding: 10upx;
				image{
					width:350upx;
					height: 400upx;
				}
			}
			.right{
				flex:1;
				padding-right:10upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			.title{
				font-size: 20px;
				font-weight: 500;
				display: block;
			}
				.list1{
					font-size: 14px;
					display: block;
					color: #ccc;
				}
				.zan{
					.iconfont{
						margin-left:15upx;
						font-size: 40upx;
					}
				}
			}
		}	
		}
	}
</style>
